<template>
  <div class="container">
    <!-- <div class="search">
      <div class="search-item">
        <div class="search-title"> 关键字 </div>
        <a-input allowClear v-model:value.trim="params.keyword" placeholder="用户昵称/手机号/所在企业" @search="search"
          style="width: 260px;margin-right: 0px;" />
      </div>
      <div>
        <a-button type="primary" style="margin-right: 10px;">搜索</a-button>
        <a-button type="primary" style="margin-right: 10px;">重置</a-button>
      </div>

    </div> -->
    <div class="add-box">
      <a-button type="primary" style="margin-right: 10px;" @click="addOrEditUser(0)">新增</a-button>

    </div>
    <div class="table-box">
      <a-table :pagination="false" :columns="columns" :data-source="listData">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'status'">
            <span>{{ record.status == 0 ? '新用户' : record.status == 1 ? '锁定' : record.status == 2 ? '正常' : ''
            }}</span>
          </template>
          <template v-if="column.key == 'action'">
            <a-button type="link" @click="toSetStatus(2)" v-if="record.status == 0" style="padding: 0 5px">审批</a-button>
            <a-button type="link" @click="toSetStatus(2)" v-if="record.status == 1" style="padding: 0 2px">解锁</a-button>
            <a-button type="link" @click="toSetStatus(1)" v-if="record.status == 2" style="padding: 0 2px">锁定</a-button>

            <a-button type="link" @click="addOrEditUser(record)" style="padding: 0 2px">编辑</a-button>
            <a-popconfirm title="确定删除?" ok-text="是" cancel-text="否" @confirm="confirm(record.userId)">
              <a-button type="link" style="margin-left: -10px;">删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
      <!-- @change="onChange" -->
      <a-pagination :show-total="total => `总共${total} 条`" style="float: right;margin: 20px 0;"
        v-model:page-size="filterData.pageSize" v-model:current="filterData.pageNum" :total="total"
        show-quick-jumper></a-pagination>
    </div>
    <!-- 新增或者编辑 -->
    <!-- :rules="rules" -->
    <a-modal :maskClosable="false" :title="title" v-model:open="modalVisible" @ok="submit">
      <a-form :label-col="{ span: 5, offset: 2 }" :wrapper-col="{ span: 14 }" ref="formAddOrEditDataRef"
        :model="formAddOrEditData">
        <a-form-item label="用户名" name="userName">
          <a-input :disabled="title == '编辑用户'" v-model:value="formAddOrEditData.userName"
            placeholder="请输入用户名"></a-input>
        </a-form-item>
        <a-form-item label="密码" name="password" v-if="title == '新增用户'">
          <a-input v-model:value="formAddOrEditData.password" placeholder="6-20位,数字、英文字符或下划线"></a-input>
        </a-form-item>
        <a-form-item label="确认密码" name="passwordAgain" v-if="title == '新增用户'">
          <a-input v-model:value="formAddOrEditData.passwordAgain" placeholder="请确认密码"></a-input>
        </a-form-item>
        <a-form-item label="真实姓名" name="realName">
          <a-input v-model:value="formAddOrEditData.realName" placeholder="请输入真实姓名"></a-input>
        </a-form-item>
        <a-form-item label="电话" name="phone">
          <a-input v-model:value="formAddOrEditData.phone" placeholder="请确认密码"></a-input>
        </a-form-item>
        <a-form-item label="公司" name="company" v-if="title == '编辑用户'">
          <a-input v-model:value="formAddOrEditData.company" placeholder="请输入公司名称"></a-input>
        </a-form-item>
        <a-form-item label="角色" name="role" v-if="title == '编辑用户'">
          <a-select v-model:value="formAddOrEditData.role" style="width: 275px">
            <a-select-option value="作业员">作业员</a-select-option>
            <a-select-option value="管理员">管理员</a-select-option>
            <a-select-option value="检查员">检查员</a-select-option>
            <a-select-option value="其他人员">其他人员</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { userList, userAdd, userEdit, userDelete, userReview } from "@/api/user";

export default {
  data() {
    return {
      title: '新增用户',

      modalVisible: false,
      formAddOrEditData: {
        userName: '',
        password: '',
        passwordAgain: '',
        realName: '',
        phone: '',
        company: '',
      },
      params: {
        keyword: ''
      },
      filterData: {
        pageSize: 1,
        pageNum: 10,
      },
      total: 0,
      columns: [
        { title: "用户名", dataIndex: "userName", key: "userName", align: "center" },
        { title: "真实姓名", dataIndex: "realName", key: "realName", align: "center" },
        { title: "电话", dataIndex: "phone", key: "phone", align: "center" },
        { title: "状态", dataIndex: "status", key: "status", align: "center" },
        { title: "角色", dataIndex: "role", key: "role", align: "center" },
        { title: "注册时间", dataIndex: "createTime", key: "createTime", align: "center" },
        { title: "所属单位", dataIndex: "company", key: "company", align: "center" },
        {
          title: "操作",
          // width: 80,
          fixed: "right",
          align: "center",
          dataIndex: "action", key: "action",
        },

      ],
      listData: [
        {
          userId: 1,
          userName: 'zhangsan',
          realName: '张三',
          phone: '1333333333',
          role: '作业员',
          status: 0,
          createTime: '2025-10-29 14:46',
          company: '公司1'
        },
        {
          userId: 1,
          userName: 'zhangsan',
          realName: '张三',
          phone: '1333333333',
          role: '管理员',
          status: 1,
          createTime: '2025-10-29 14:46',
          company: '公司1'
        },
        {
          userId: 1,
          userName: 'zhangsan',
          realName: '张三',
          role: '检查员',
          status: 0,
          phone: '1333333333',
          createTime: '2025-10-29 14:46',
          company: '公司1'
        },
        {
          userId: 1,
          userName: 'zhangsan',
          realName: '张三',
          role: '其他人员',
          phone: '1333333333',
          createTime: '2025-10-29 14:46',
          company: '公司1',
          status: 2,
        },

        {
          userId: 1,
          userName: 'zhangsan',
          realName: '张三',
          phone: '1333333333',
          createTime: '2025-10-29 14:46',
          company: '公司1',
          status: 2,

        },
        {
          userId: 1,
          userName: 'zhangsan',
          realName: '张三',
          phone: '1333333333',
          createTime: '2025-10-29 14:46',
          company: '公司1',
          status: 1,

        }, {
          userId: 1,
          userName: 'zhangsan',
          realName: '张三',
          phone: '1333333333',
          createTime: '2025-10-29 14:46',
          company: '公司1',
          status: 0,

        }, {
          userId: 1,
          userName: 'zhangsan',
          realName: '张三',
          phone: '1333333333',
          createTime: '2025-10-29 14:46',
          company: '公司1'
        }, {
          userId: 1,
          userName: 'zhangsan',
          realName: '张三',
          phone: '1333333333',
          createTime: '2025-10-29 14:46',
          company: '公司1'
        }, {
          userId: 1,
          userName: 'zhangsan',
          realName: '张三',
          phone: '1333333333',
          createTime: '2025-10-29 14:46',
          company: '公司1'
        }, {
          userId: 1,
          userName: 'zhangsan',
          realName: '张三',
          phone: '1333333333',
          createTime: '2025-10-29 14:46',
          company: '公司1'
        },

      ]
    }
  },
  components: {},
  computed: {

  },
  mounted() {

    // this.getUserList()

  },
  methods: {
    getUserList() {
      userList(this.filterData)
        .then((res) => {
          console.log(res, 8888);
          if (res.code == 200) {
            this.listData = res.data
            this.total = res.total
          }
        })
        .catch(() => { });
    },
    // onChange(e) {
    //   this.filterData.pageNum = e
    //   this.getUserList()
    // },
    toAdd() {
      this.modalVisible = true;
    },
    // 新增/编辑 管理员
    addOrEditUser(data) {
      console.log(data);

      this.modalVisible = true;
      if (data == 0) {
        this.title = "新增用户"
        this.$nextTick(() => {
          this.$refs.formAddOrEditDataRef.resetFields()
          this.formAddOrEditData.userId = 0;
        })

      } else {
        this.title = "编辑用户"
        this.$nextTick(() => {
          this.$refs.formAddOrEditDataRef.resetFields()
          this.formAddOrEditData = {
            userId: data.userId,
            userName: data.userName,
            realName: data.realName,
            phone: data.phone,
            company: data.company,
            role: data.role,

          };
        })

      }
    },
    submit() {
      //新增或者编辑
      this.$refs.formAddOrEditDataRef.validate(() => {
        let formAddOrEditData1 = JSON.parse(JSON.stringify(this.formAddOrEditData))
        if (this.title = '新增用户') {
          userAdd(formAddOrEditData1)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success('新增成功')
                this.getUserList()
              }
            })
            .catch(() => { });
        } else {
          userEdit(formAddOrEditData1)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success('编辑成功')
                this.getUserList()
              }
            })
            .catch(() => { });

        }
      })

    },
    confirm(userId) {
      console.log(userId);

      userDelete(userId)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getUserList()
          }
        })
        .catch(() => { });
    },
    toSetStatus(status) {
      let data = {
        userId: record.userId,
        status
      }
      userStatus(data)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('成功')
            this.getUserList()
          }
        })
        .catch(() => { });
    }

  }
}
</script>


<style scoped lang="less">
.container {
  height: 100%;
  overflow: auto;

  .search {
    display: flex;
    flex-wrap: wrap;

    .search-item {
      margin: 0 15px 15px 0;
      font-size: 16px;
      display: flex;
      align-items: center;

      .search-title {
        font-size: 15px;
        color: #333333;
        margin-right: 10px;
        font-weight: 400;

      }
    }
  }

  .add-box {
    display: flex;
    // justify-content: end;
    margin: 0 0 15px 0;

  }

  .table-box {

    // border: 1px solid red;
  }
}
</style>
